<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->

      <div id="BackLink">
        <router-link to="/catalog/Product">
          回到{{ item_form.productId }}
        </router-link>
      </div>
      <br/>
      <div class="heiheihei">
        <section class="product">
          <div class="product__photo">
            <div class="photo-container">
              <div class="photo-main">
                <div class="controls">
                  <i class="material-icons">分享</i>
                  <i class="material-icons">喜爱的图片</i>
                </div>
                <br/>
                <img :src="item_form.attribute5" />
              </div>
            </div>
          </div>
          <div class="product__info">
            <div class="title">
              <h1>好看的宠物</h1>
              <span>{{item_form.itemId}}</span>
            </div>
            <div class="price">
              R$ <span>{{ item_form.listPrice }}</span>
            </div>
            <div class="description">
              <h3>基本信息</h3>
              <ul>
                <li>{{ item_form.attribute1 }}</li>
                <li>{{ item_form.attribute2 }}</li>
                <li>{{ item_form.attribute3 }}</li>
                <li>{{ item_form.attribute4 }}</li>
              </ul>
            </div>
            <div>
              <a class="buy--btn" @click="addProductSession(item_form.itemId)" href="addItemToCart?workingItemId=${item.itemId}">Add to Cart</a>
            </div>
          </div>
        </section>
      </div>




      <!--以下是尾部信息-->
    </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>





</template>

<script setup>
import api from "../../api/index.js";
import {onMounted, reactive, ref} from "vue";
import {useStore} from "vuex";
const store = useStore()
const item_form = reactive({
  itemId:'',
  productId:'',
  listPrice:'',
  unitCost: '',
  supplierId: '',
  status: '',
  attribute1:'',
  attribute2:'',
  attribute3:'',
  attribute4:'',
  attribute5:''
})

//页面刚出现时调用的方法
onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData();
  console.log("kjjk");
})

function addProductSession(itemId) {
  console.log("hhhh");
  //测试后端向前端传数据，成功！
  api.putCartItem(itemId).then(res => {
    console.log(itemId);
  })
}

const searchKeyword = ref('')

//搜索部分内容
function searchProducts() {
  // 这里写提交搜索的逻辑代码，使用searchKeyword.value获取搜索关键字
  console.log(searchKeyword.value);
  api.getSearchResult(searchKeyword.value).then(res => {
    //这里首先要判断一下状态码
    console.log("好好回去");
    var statusCode = res.data.status;
    console.log("statusCode is : " + statusCode);
  })
}

//页面刚出现时调用的方法
const getData = () => {
  //测试后端向前端传数据，成功！
  api.getNewItemForm().then(res => {
    console.log("kjjk");
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log(res.data);
    console.log(res.data.data.attribute1);
    item_form.attribute1=res.data.data.attribute1;
    item_form.attribute2=res.data.data.attribute2;
    item_form.attribute3=res.data.data.attribute3;
    item_form.attribute4=res.data.data.attribute4;
    item_form.attribute5=res.data.data.attribute5;
    item_form.listPrice=res.data.data.listPrice;
    item_form.itemId=res.data.data.itemId;
    item_form.productId=res.data.data.productId;
  })
}

const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清楚服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}

</script>

<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>